<template>
  <div id="app">
    <div class="content">
      <!--SHOP图展示-->
      <shopPic
        :imgUrl="
          this.goodsInfo.detailsImgUrl
            ? this.goodsInfo.detailsImgUrl
            : this.goodsInfo.imgUrl
        "
      ></shopPic>
      <!--SHOP图展示-->

      <van-cell-group>
        <van-cell title="套餐类型" class="fix-cell__title">
          <span>{{ goodsInfo.title }}</span>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <span
          style="
            display: block;
            color: #1989fa;
            padding: 10px;
            font-weight: 600;
            font-size: 12px;
          "
          ><van-icon name="manager" /> 实名信息</span
        >
      </van-cell-group>

      <van-form @submit="onSubmit">
        <van-field
          v-model="orders.name"
          label="姓名"
          placeholder="请输入姓名（已加密）"
          :rules="[{ required: true }]"
        />
        <van-field
          v-model="orders.idCard"
          label="身份证号"
          placeholder="请输入身份证号（已加密）"
          :rules="[{ required: true , validator}]"
        />
        <van-field
          v-model="orders.phone"
          label="联系电话"
          placeholder="请输入联系电话，并保持畅通"
          :rules="[{ required: true , pattern}]"
        />
        <van-cell-group>
          <span
            style="
              display: block;
              color: #1989fa;
              padding: 10px;
              font-weight: 600;
              font-size: 12px;
            "
            ><van-icon name="location" /> 填写配送地址</span
          >
        </van-cell-group>

        <van-field
          readonly
          clickable
          name="area"
          :value="countyValue"
          label="所在城市"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>

        <van-cell-group>
          <van-field
            v-model="city"
            label="详细地址"
            placeholder="如街道、道路、小区、门牌号"
            :rules="[{ required: true }]"
          />
        </van-cell-group>

        <van-cell-group style="padding: 10px">
          <van-button
            block
            type="info"
            native-type="submit"
            loading-text="提交中..."
            :loading="loading"
            >提交信息</van-button
          >
        </van-cell-group>

      </van-form>
    </div>
    <van-tabbar route placeholder safe-area-inset-bottom >
      <van-tabbar-item replace to="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/searchOrder" icon="search">订单查询</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import shopPic from "@/components/shopPic";
import { areaList } from "@vant/area-data";
import { getGoodInfo } from "@/api/index.js";
import request from "@/utils/request";

export default {
  name: "BuyOrder",
  components: {
    shopPic,
  },
  data() {
    return {
      goodsInfo: {},
      areaList,
      orders: {},
      value: "",
      showArea: false,
      areaList,
      noBlankCounty: "",
      city: "",
      countyValue: "",
      loading: false,
      pattern:
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
    };
  },
  methods: {
    onSubmit() {
      this.loading = true;
      this.orders.id = this.$route.query.id;
      this.orders.county = this.noBlankCounty + this.city;
      console.log(this.orders);

      request({
        url: "/api/addOrder",
        method: "POST",
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        data: {
          id: this.orders.id,
          name: this.orders.name,
          idcard: this.orders.idCard,
          phone: this.orders.phone,
          address: this.orders.county,
        },
      }).then((res) => {
        this.loading = false;
        console.log(res.data);
        if (res.data.code != 200) {
          return this.$toast.fail("1订单提交失败，请返回重试");
        } else{
          this.$toast.success(res.data.msg);
        }
        
      });
    },
    onConfirm(values) {
      this.countyValue = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join(" ");
      this.noBlankCounty = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("");
      this.showArea = false;
    },
    validator(val) {
      //身份证正则
      return /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
        val
      );
    },
  },
  created() {
    if (this.$route.query.id == "" || this.$route.query.id == null) {
      return this.$toast("请求参数异常");
    }
    getGoodInfo(this.$route.query.id).then((res) => {
      if (res.data.code != 200) {
        return this.$toast(res.data.msg);
      }
      this.goodsInfo = res.data.data;
    });
  },
};
</script>

<style scoped>
@media screen and (min-width: 600px) {
  #app {
    width: 500px;
    box-shadow: 0 0 10px #ccc;
    margin: 10px auto;
  }
}
.fix-cell__title .van-cell__title {
  max-width: 90px;
}
.fix-cell__title .van-cell__value {
  text-align: left;
}
.van-divider {
  margin: 0;
}
</style>